<template>
  <div class="list-item">
    <div class="left">
      <div class="block">
        <el-image style="width: 200px; height: 150px;" :src="attraction.bannerUrl"></el-image>
      </div>
    </div>
    <div class="right">
      <h3 class="title">{{ attraction.name }}</h3>
      <p>地址：{{ attraction.address }}</p>
      <p>地区： {{ attraction.areaName }}</p>
      <div class="bottom">
        <span class="price">
          <b>￥</b>
          <s>{{ attraction.price }}</s>
          起
        </span>
        <div class="action">
          <span class="btn" @click="goDetail">立即预定</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'AttractionListItem',
  props: [
    'attraction'
  ],
  created() {
    console.log('attraction:', this.attraction);
  },
  data() {
    return {

    }
  },
  methods: {
    goDetail() {
      // this.$router.push({
      //   name: 'attraction',
      //   params: {
      //     attrId: this.attraction.attrId
      //   }
      // })
      this.$router.push({ path: '/attraction/' + this.attraction.attrId })
    }
  }
}
</script>
 
<style lang="less" scoped>
.list-item:hover {
  background-color: #f2f1f1;
  padding: 20px;
  .right {
    .title {
      color: #ff9d00;
    }
    .bottom {
      .action {
        .btn {
          background-color: #ff9d00;
          color: #ffffff;
        }
      }
    }
  }
  
}

.list-item {
  width: 680px;
  height: 150px;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  margin: 20px 0;

  .left {
    margin-right: 20px;
  }

  .right {
    width: 480px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    p {
      height: 10px;
    }

    .title {
      line-height: 8px;
    }

    .bottom {
      height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        margin-right: 5px;
        color: #ff9d00;
        font-size: 14px;

        b {
          font-size: 18px;
        }

        s {
          font-size: 28px;
          font-weight: bold;
          text-decoration: none;
        }
      }

      .action {
        .btn {
          display: inline-block;
          width: 98px;
          height: 28px;
          border: 1px solid #ff9d00;
          text-align: center;
          font-size: 16px;
          border-radius: 2px;
          color: #ff9d00;
          line-height: 28px;
        }

        // .btn:hover {
        //   background-color: #ff9d00;
        //   color: #ffffff;
        // }
      }
    }
  }

}</style>